<template>
  <div style="width: 800px">
    <el-input v-model="keyword">
      <el-button slot="append" icon="el-icon-search" @click="scrollToKeyword"></el-button>
    </el-input>
    <el-table
        ref="table"
        border
        height="300"
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import elTableScrollToRow from "@/utils/elTableScrollToRow";

export default {
  name: "ScrollElTable",
  data() {
    return {
      tableData: [],
      keyword: ''
    }
  },
  methods: {
    scrollToKeyword() {
      let rows = this.tableData.filter(item => item.name === this.keyword)
      if (rows.length) {
        elTableScrollToRow(this.$refs.table, rows[0])
      }
    }
  },
  mounted() {
    for (let i = 0; i < 20; i++) {
      this.tableData.push({
        date: '2016-05-02',
        name: `王小虎${i}`,
        address: '上海市普陀区金沙江路 1518 弄'
      })
    }
  }
}
</script>

<style scoped>

</style>